<template>
    <div>
        <div>唤起app端</div>
        <!--是否在微信中打开-->
        <div v-if="wechatFlag">打开APP
            <wx-open-launch-app id="wx-open-launch-app" appid="wx329392544913ec90" :extinfo='extinfoValue'
                                style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;"
                                @error="handleErrorFn" @launch="handleLaunchFn">
                <div v-is="'script'" type="text/wxtag-template">
                    <div v-is="'style'">.btn { padding: 12px }</div>
                    <div class="btn"></div>
                </div>
            </wx-open-launch-app></div>
        <div @click="goApp" v-if="!wechatFlag">打开APP</div>
    </div>
</template>

<script setup lang="ts">
    import { callApp } from "../utils/callOpenApp"
    import { onMounted, ref } from "vue";
    import { judgeEnvir } from "../utils/judgeEnvir" //判断页面环境

    const wechatFlag = ref();
    const extinfoValue = ref();

    let url = '跳转app内部页面的地址'

    function handleLaunchFn(e: any) {
        console.log('success', e);
    }

    function handleErrorFn(e: any) {
        console.log('fail', e);
        window.location.href = 'https://zmtv.cztv.com/ap/download/index.shtml';
    }

    //跳转App
    function goApp() {
        //唤起客户端相关参数
        callApp.open(url);
    }

    onMounted(() => {
        wechatFlag.value = judgeEnvir.isWechat();
        if(judgeEnvir.isAndroid()) {
            extinfoValue.value = JSON.stringify({
                route: url
            })
        }
        else if(judgeEnvir.isIOS()) {
            extinfoValue.value = JSON.stringify({
                route: encodeURIComponent(url)
            })
        }
    })
</script>

<style scoped>

</style>